<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<input type="text" name="" value="张家口">
	<button>查询</button>
	<input type="text" name="" value="青岛">
	<button>查询</button>
	<div id="main" style="width:100%;height: 400px;"></div>
	<script type="text/javascript" src="echarts.js"></script>
	<script type="text/javascript" src="../13AJAX/ajax.js"></script>
	<script type="text/javascript">	
		 var myChart = echarts.init(document.getElementById('main'));

		option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      // stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      // stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
};
		myChart.setOption(option);

		let btn = document.querySelectorAll("button")
		let inp = document.querySelectorAll("input")
		console.log(option.legend.data)
		console.log(option.series[0].name)

		btn[0].onclick = function(){
			ajax({
				method: "get",
				url: "https://geoapi.qweather.com/v2/city/lookup",
				params:{
					location: inp[0].value,
					key: "c494e264764449f7b4f6bf742276d7f9"
				},
				success: function(res){
					console.log(res)
					weather(res.location[0].id)
					// console.log(res.location[0].name)
					option.series[0].name = res.location[0].name
					option.legend.data[0] = res.location[0].name
				}
			})
		}

		 function weather(id){
			ajax({
				method: "get",
				url: "https://devapi.qweather.com/v7/weather/7d",
				params:{
					location: id,
					key: "c494e264764449f7b4f6bf742276d7f9"
				},
				success: function(res){
					console.log(res)
					if(res.code == 200){
						option.xAxis.data = []
						option.series[0].data = []

						for(let i = 0; i < res.daily.length; i++){
							option.xAxis.data.push(res.daily[i].fxDate)
							option.series[0].data.push(res.daily[i].humidity)
						}
							
						// 再去渲染一下新数据
						myChart.setOption(option);
					}
					
				}
			})
		}
		btn[1].onclick = function(){
			ajax({
				method: "get",
				url: "https://geoapi.qweather.com/v2/city/lookup",
				params:{
					location: inp[1].value,
					key: "c494e264764449f7b4f6bf742276d7f9"
				},
				success: function(res){
					console.log(res)
					weathers(res.location[0].id)
					option.series[1].name = res.location[0].name
					option.legend.data[1] = res.location[0].name
				}
			})
		}

		 function weathers(id){
			ajax({
				method: "get",
				url: "https://devapi.qweather.com/v7/weather/7d",
				params:{
					location: id,
					key: "c494e264764449f7b4f6bf742276d7f9"
				},
				success: function(res){
					console.log(res)
					if(res.code == 200){
						option.xAxis.data = []
						option.series[1].data = []

						for(let i = 0; i < res.daily.length; i++){
							option.xAxis.data.push(res.daily[i].fxDate)
							option.series[1].data.push(res.daily[i].humidity)
						}
							
						// 再去渲染一下新数据
						myChart.setOption(option);
					}
					
				}
			})
		}
	</script>

</body>
</html>